<template>
	<view>
		<view class="cu-custom" :style="[{height:setting.CustomBar + 'px'}]">
			<view class="cu-bar fixed bg-red search" :style="headerStyle" :class="[props.bgImage!=''?'none-bg text-white bg-img':'',props.bgColor]">
				<view @click="handleLocationShop" class="action">
					<text>{{setting.community.name||'选择社区'}}</text>
					<text class="cuIcon-triangledownfill"></text>
				</view>
				<view @click="handleClick" class="search-form round">
					<text class="cuIcon-search"></text>
					<input @focus="InputFocus" :disabled="true" @blur="InputBlur" :adjust-position="false" type="text" placeholder="搜索想要查找社区" confirm-type="search"/>
				</view>
			</view> 
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		useSettingStore
	} from '@/stores/index';
	import {
		watch,
		computed,
		ref
	} from "vue";
	const setting = useSettingStore();
	const emit = defineEmits(['action']);
	const props = defineProps({
		bgColor: {
			type: String,
			default: ''
		},
		isBack: {
			type: [Boolean, String],
			default: false
		},
		bgImage: {
			type: String,
			default: ''
		}
	})
	const handleLocationShop = () => {
		uni.navigateTo({
			url: '/views/other/bindshop'
		});
	};
	const handleClick = () => {
		uni.navigateTo({
			url: '/pages/canteen/search'
		});
	};
	const headerStyle = computed(() => {
		var StatusBar = setting.StatusBar;
		var CustomBar = setting.CustomBar;
		var bgImage = props.bgImage;
		var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
		if (props.bgImage) {
			style = `${style}background-image:url(${bgImage});`;
		}
		return style;
	})
	const InputBottom=ref(0)
	const InputFocus=(e:any)=> {
		InputBottom.value = e.detail.height
	}
	const InputBlur=(e:any)=> {
		InputBottom.value = 0
	}
	const handleBackPage = (res) => {
		if(props.isBack){
			uni.navigateBack({
				delta: 1
			});
		}else{
			emit('action')
		}
	}
</script>

<style>

</style>
